<template>
  <div class="mod-config">
    <basic-container>
        <navigationRenWuShu :sign="{a:false,b:true,c:false,d:false,e:false,f:false}"></navigationRenWuShu>
      <div v-if="zhiShow=='1'" class="boxsty zhiBiao">
        <!-- <div class="flex justifyContentSpaceBetween">
            <div class="tabletext">指标拟定</div>
        </div> -->
        <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
           <div  v-show="searchadvanced" >
                <div class="flex">
                    <div>
                        <el-form :model="dataForm"  :inline="true" class="form-inline">
                        <el-form-item label="受约人姓名">
                            <el-input v-model="dataForm.shouyueName" placeholder="受约人姓名" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="受约人职务">
                            <el-input v-model="dataForm.shouyueZhiwu" placeholder="受约人职务" style="width: 160px;"></el-input>
                        </el-form-item>
                        <el-form-item label="有效期">
                            <el-date-picker
                                v-model="dataForm.htYxqq"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                            <span class="mg-0-10">至</span>
                            <el-date-picker
                                v-model="dataForm.htYxqz"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="签订级别">
                            <el-select :clearable="true" v-model="dataForm.signLevel" placeholder="请选择签订级别"  style="width:100%;"
                                class="xiaLa">
                                <el-option v-for="(item,index) in qdjbList" :key="index" :label="item.name" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button icon="el-icon-search" type="primary" class="marginLeft"   @click="getDataList(1)" >检索</el-button>
                        </el-form-item>
                        </el-form>
                    </div>
                </div>
           </div>
        </div>

            <div class="border-top-theme">
                <div class="mt10">
                    任务书
                    <span>
                        <el-radio v-model="radio" label="1">个人</el-radio>
                        <el-radio v-model="radio" label="2">机构</el-radio>
                    </span>
                    <div style="float:right">
                        <el-button type="primary">模板下载</el-button>
                        <el-button type="primary">批量导入</el-button>
                        <el-button type="primary" @click="onBatch">批量拟定#</el-button>
                        <el-button type="primary" @click="submitAll" >批量提交</el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" style="width: 100%;margin-top:20px" height="60vh" ref="tableRef" v-loading="dataListLoading">

                <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column>
                <el-table-column type="index" width="80" header-align="center" align="center" label="序号"></el-table-column>
                <el-table-column v-if="show" prop="htId" label="htId"  width="55" header-align="center" align="center"></el-table-column>
                <el-table-column prop="workAssignName" label="任务书名称" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column
              prop="contractName"
              header-align="center"
              align="center"
              width="160"
              label="合同名称">
            </el-table-column>
            <el-table-column
            prop="shouyueName"
            header-align="center"
            align="center"
            min-width="120"
            label="受约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.shouyueName).slice(0, 2)">
                <el-tooltip class="item" :disabled="cutout(scope.row.shouyueName).length<3" effect="dark" :content="scope.row.shouyueName" placement="top-start">
                  <span>{{item}}<span v-if="cutout(scope.row.shouyueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="shouyueZhiwu"
            header-align="center"
            align="center"
            min-width="180"
            label="受约人职务">

            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.shouyueZhiwu).slice(0, 2)">
                <el-tooltip class="item"  :disabled="item.length<8&&cutout(scope.row.shouyueZhiwu).length<3" effect="dark" :content="scope.row.shouyueZhiwu" placement="top-start">
                  <span>{{validatenull(item)?'-':item | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueName"
            header-align="center"
            align="center"
            min-width="120"
            label="发约人姓名">
            <template slot-scope="scope">
              <div v-for="(item,index) in cutout(scope.row.fayueName).slice(0, 2)">
                <el-tooltip :disabled="cutout(scope.row.fayueName).length<3" class="item" effect="dark" :content="scope.row.fayueName" placement="top-start">
                <span>{{item}}<span v-if="cutout(scope.row.fayueName).length>2&&index==1">...</span></span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="fayueZhiwu"
            header-align="center"
            align="center"
            min-width="180"

            label="发约人职务">
            <template slot-scope="scope">
              <div v-for="item in cutout(scope.row.fayueZhiwu).slice(0, 2)">
                <el-tooltip class="item" :disabled="item.length<8&&cutout(scope.row.fayueZhiwu).length<3" effect="dark" :content="scope.row.fayueZhiwu" placement="top-start">
                    <span>{{(validatenull(item)?'-':item) | ellipsis}}</span>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
                <el-table-column prop="indiNumbers" label="指标数量" min-width="120" header-align="center" align="center"></el-table-column>
                <el-table-column prop="signLevel" label="任务书级别" min-width="120" header-align="center" align="center">
              <template slot-scope="scope">
                <span v-html="qiandingjb(scope.row.signLevel)"/>
              </template>

                </el-table-column>
                <el-table-column prop="status" label="状态" min-width="120" header-align="center" align="center">
                     <template slot-scope="scope">
                      <el-popover placement="left" width="120"  trigger="hover">
                        <div slot="reference" class="name-wrapper">
                          <span v-if="scope.row.status == 0">未提交</span>
                          <span v-else-if="scope.row.status == 1">已提交</span>
                        </div>
                      </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button  plain type="primary" @click="checkDetails(scope.row)">编辑查看</el-button>
                        <el-button v-if="scope.row.status == 0" plain type="primary" @click="submit(scope.row)">提交</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
                            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
                            layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
            </div>
      </div>
      <rwszbForm ref="rwszbFormRef" v-if="zhiShow==2" :rwszbForm='rwszbForm' v-on:zhibiaoChild='zhibiaoChild'></rwszbForm>
    </basic-container>
  </div>
</template>

<script>
import rwszbForm from '@/views/hetongrenwu/components/renwushuzb-form.vue'
import { page,submitStatus, submitStatusAll } from '@/api/hetongrenwu/gongzuorenwushu/workAssignzbnd'
import { validatenull } from "@/util/validate";


export default {
    components:{
        rwszbForm
    },
    data(){
        return{
          dataForm:{},
            show: false,
            dataListLoading: false,
            radio:'1',
            radioTwo:1,
            tableData:[],
            pageIndex:1,
            pageSize: 10,
            totalPage: 0,
            zhiShow:1,
            rwszbForm:{},
            // gridData:[
            //     {
            //     zhiwu: '经理',
            //     name: '王小虎',
            //     status: '退回'
            //     }
            // ],
            qdjbList:[
                  {name:'所属单位部门负责人',value:'1'},
                  {name:'本部一般管理人员',value:'2'},
                  {name:'所属单位一般管理人员',value:'3'}
            ],
            searchadvanced: true,
            searchheight: '0',
        }
    },
    filters:{
        ellipsis(value){
          if (!value) return '';
          if (value.length > 8) {
            return value.slice(0,8) + '...'
          }
          return value
        }
      },
    watch:{
    radio(value){
      if(value){
        this.getDataList();
      }
    },
    radioTwo(value){
      if(value){
        this.getDataList();
      }
    }
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo=params.radioTwo
    }
    this.getDataList();
  },
    methods:{
      searchchangeadvanced() {
            this.searchadvanced = !this.searchadvanced;
            if(this.searchadvanced){
                this.searchheight= 'auto'
            }
        },
        //提交
        submit(row){
            this.$confirm('是否要提交该条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                  submitStatus(row.id).then(res => {
                    this.$message.closeAll();
                      this.$message({
                          type: 'success',
                          message: '提交成功!'
                      });
                      this.getDataList()
                  }).catch(() => {
                      this.$message({
                          type: 'error',
                          message: '提交失败!'
                      });
                  })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });
                });
        },
        //批量提交
        submitAll(){
            const rows = this.$refs.tableRef.selection

            var status=0;
            for(var i in rows){
             //console.log(rows[i])
            status=status+rows[i].status;
            }
            if(status>0){
               this.$message({
                    type: 'info',
                    message: '请选择未提交的任务书!'
                });
              return;
            }
            if(rows.length > 0){
                this.$confirm('是否要提交' + rows.length + '条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    submitStatusAll(rows).then(res => {
                        this.$message.closeAll();
                        this.$message({
                            type: 'info',
                            message: res.data.data + '条拟定已提交'
                        });
                        this.getDataList();
                    }).catch(() => {
                        this.$message({
                            type: 'error',
                            message: '提交失败!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '请选择一条数据提交!'
                });
            }
        },
        //编辑查看
        checkDetails(row){

            this.zhiShow=2;
            this.rwszbForm={
                status:row.status,
                enter:1,
                disabled:false
            }
            var params=Object.assign(row,this.rwszbForm)
           //console.log(params);
            this.$nextTick(() => {
              this.$refs.rwszbFormRef.init(params)
            })
        },
        //批量拟定
        onBatch(){
             const rows = this.$refs.tableRef.selection

            var status=0;
            for(var i in rows){
            status=status+rows[i].status;
            }
            if(status>0){
               this.$message({
                    type: 'info',
                    message: '请选择未提交的任务书!'
                });
              return;
            }
            this.zhiShow=2;
            this.rwszbForm={
                enter:5,
                disabled:false
            }
           //console.log(rows);
            this.$nextTick(() => {
              this.$refs.rwszbFormRef.initAll(rows)
            })
        },
        //子集信息
        zhibiaoChild(zhibiaoChild){
            if(zhibiaoChild){
                this.zhiShow=1
            }
            this.getDataList();

        },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        page(Object.assign({
          type:this.radio,
          isbenbu:this.radioTwo,
          htYxqq:this.dataForm.htYxqq,
          htYxqz:this.dataForm.htYxqz,
          signLevel:this.dataForm.signLevel,
          shouyueName:this.dataForm.shouyueName,
          shouyueZhiwu:this.dataForm.shouyueZhiwu,
          current: this.pageIndex,
          size: this.pageSize
        })).then(response => {
          this.tableData = response.data.data.records;
          this.totalPage = response.data.data.total;
          this.$nextTick(function(){
            this.dataListLoading = false
          })
        })

      },
      // 每页数
      sizeChangeHandle(val) {
          this.pageSize = val
          this.pageIndex = 1
          this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
          this.pageIndex = val
          this.getDataList()
      },
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },

      qiandingjb(cellValue) {

        if(cellValue==1){
          return '所属单位部门负责人';
        }
        if(cellValue==2){
          return '本部一般管理人员';
        }
        if(cellValue==3){
          return '所属单位一般管理人员';
        }

      },



    }
}
</script>

<style>

</style>
